<!-- 地区选择 -->
<template>
	<view class="select-region">
		<view class="tool-input uni-ellipsis" v-text="text" :placeholder="placeholder" @click="showBox"></view>
		<view class="select-bg" v-if="boxState" @click="hideBox">
			<view :class="'select-box'+(listState?' show':'')" @click.stop="">
				<view class="top_view" v-if="placeholder">
					<view class="top_bg"></view>
					<text>{{placeholder}}</text>
				</view>
				<view class="flex-box">
					<scroll-view scroll-y class="flex-item first-box">
						<view :class="[selectItem(0,item.value)]" v-for="item in localdata" :key="item.id"
							@click="select(0,item)">
							<text>{{item.title}}</text>
						</view>
					</scroll-view>
					<scroll-view scroll-y class="flex-item second-box">
						<template v-if="selectPath.length>0">
							<view :class="[selectItem(1,item.value)]" v-for="item in secondList" :key="item.id"
								@click="select(1,item)">
								<text>{{item.title}}</text>
							</view>
						</template>
					</scroll-view>
					<scroll-view scroll-y class="flex-item third-box">
						<template v-if="selectPath.length>1">
							<view :class="[selectItem(2,item.value)]" v-for="item in thirdList" :key="item.id"
								@click="select(2,item)">
								<text>{{item.title}}</text>
							</view>
						</template>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			value: String,
			placeholder: String,
		},
		data() {
			return {
				text: '',
				boxState: false,
				listState: false,
				selectPath: [],
			};
		},
		watch: {
			localdata() {
				this.getSelectPath(this.value);
			},
			// value() {
			// 	if (this.value && this.value.length == 6) {
			// 		this.getSelectPath(this.value);
			// 	} else {
			// 		this.$emit('input', '');
			// 	}
			// },
			value: {
			    handler(newVal) {
			      if (newVal && newVal.length === 6) {
			        this.getSelectPath(newVal);
					console.log('回显')
			      }
			    },
			    deep: true,
			  },
			text() {
				this.$emit('change', this.text);
			}
		},
		computed: {
			localdata() {
				return this.$store.getters.getRegionData;
			},
			secondList() {
				var res = [];
				if (this.selectPath.length > 0) {
					const value = this.selectPath[0];
					if (value) {
						var item = this.localdata.find(item => item.value == value)
						if (item && item.children) {
							res = item.children;
						}
					}
				}
				// console.log(res, this.selectPath)
				return res;
			},
			thirdList() {
				var res = [];
				if (this.selectPath.length > 1) {
					const value = this.selectPath[1];
					if (value) {
						var item = this.secondList.find(item => item.value == value)
						if (item && item.children) {
							res = item.children;
						}
					}
				}
				// console.log(res, this.selectPath)
				return res;
			}
		},
		mounted() {
		  if (this.value && this.value.length === 6) {
		    this.getSelectPath(this.value);
		  }
		},
		methods: {
			selectItem(index, value) {
				var cur = this.selectPath[index];
				return 'select-item' + (cur == value ? ' cur' : '')
			},
			hideBox() {
				this.boxState = false;
				this.listState = false;
			},
			getSelectPath(value) {
				if (!value) {
					this.text = ''
					return [];
				}
				var path = [];
				topfor:
					for (let top of this.localdata) {
						if (value.startsWith(top.value)) {
							path[0] = top;
							if (top.children) {
								for (let child of top.children) {
									if (value.startsWith(child.value)) {
										path[1] = child;
										if (child.children) {
											for (let item of child.children) {
												if (item.value == value) {
													path[2] = item;
													break topfor;
												}
											}
										}
									}
								}
							}
						}
					}
				this.text = path.map((item) => {
					return item.title;
				}).join('');
				return path.map((item) => {
					return item.value;
				});
			},
			showBox() {
				this.boxState = true;
				this.selectPath = this.getSelectPath(this.value);
				this.$nextTick(() => {
					setTimeout(() => {
						this.listState = true;
					}, 1)
				})
			},
			select(index, item) {
				// console.log(item)
				this.selectPath.splice(index, this.selectPath.length, item.value);
				if (!item.children || item.children.length == 0) {
					this.getSelectPath(item.value);
					this.$emit('input', item.value);
					this.hideBox()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.select-region {
		overflow: hidden;

		.tool-input {
			width: 100%;
			height: inherit;
			line-height: inherit;
			font-size: inherit;
			min-height: 0;

			&:empty {
				color: lightgrey;

				&::before {
					content: attr(placeholder);
				}
			}
		}

		.select-bg {
			position: fixed;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.3);
			z-index: 99;



			.select-box {
				position: absolute;
				left: 0;
				bottom: 0;
				right: 0;
				background-color: #FFFFFF;
				border-radius: 20rpx 20rpx 0 0;
				padding: 10rpx 20rpx 10px;
				transform: translateY(100%);
				transition: all 0.4s;

				.top_view {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-bottom: 30rpx;


					.top_bg {
						width: 100rpx;
						height: 8rpx;
						background-color: $app-color;
						border-radius: 5rpx;

					}

					text {
						margin-top: 10rpx;
						font-size: 32rpx;
					}
				}

				.label {
					font-size: 30rpx;
					line-height: 3em;
					padding-left: 0.25em;
				}

				.flex-box {
					display: flex;
					height: 80vh;

					.flex-item {
						flex: 1;

						.select-item {
							line-height: 1.4em;
							padding: 0.9em;
							border-bottom: 1rpx solid #ddd;
							text-align: center;

							&.cur {
								background-color: #F8F8F8;
							}
						}
					}
				}

				&.show {
					transform: translateY(0);
				}
			}
		}
	}
</style>